<template>
  <div>
    <template v-if="taskDetail.remunerationTypeModel === 12">
      <el-form :model="form" label-width="130px" :rules="rules" ref="form" class="pad-t-10">
        <el-form-item label="追加数量：" prop="acceptanceNum">
          <el-col :span="16" class="input-r-txt">
            <el-input v-model="form.acceptanceNum" type="number"/>
            <span>件</span>
          </el-col>
        </el-form-item>
        <el-form-item label="追加酬金：" prop="amount">
          <el-col :span="16" class="input-r-txt">
            {{ price*100*form.acceptanceNum /100 }}
            <span>元</span>
          </el-col>
        </el-form-item>
        <el-form-item label="验收内容：" prop="remark">
          <el-col :span="16">
            <el-input type="textarea" :autosize="{minRows:5}" v-model="form.remark"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
    </template>
    <template v-else>
      <el-form :model="formFinanceAdd" label-width="130px" :rules="rulesFinanceAdd" ref="formFinanceAdd" class="pad-t-10">
        <el-form-item label="选择微客：" prop="memberId">
          <el-select v-model="formFinanceAdd.memberId">
            <el-option :label="item.nickname" :value="item.memberId" :key="item.memberId" v-for="item in weikeNameOption"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="追加酬金：" prop="amount">
          <el-col :span="16" class="input-r-txt">
            <el-input v-model="formFinanceAdd.amount" type="number"/>
            <span>元</span>
          </el-col>
        </el-form-item>
        <el-form-item label="验收内容：" prop="remark">
          <el-col :span="16">
            <el-input type="textarea" :autosize="{minRows:5}" v-model="formFinanceAdd.remark"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
    </template>
    <div slot="footer" class="dialog-footer">
      <el-button @click="financeTaskClose">取消</el-button>
      <el-button type="primary" @click="handleFinanceAddSubmin">确认提交</el-button>
    </div>
  </div>
</template>

<style scoped>
.svg-icon{
  margin-right: 6px;

}
.wechatRadius{
  font-size: 26px;
}
.alipay{
  font-size: 60px;
  height: 30px;
}
.radio-txt{
  vertical-align: top;
  display: inline-block;
  padding-top: 6px;
}
.radio-border{
  border:#ccc 1px solid;
  vertical-align: middle;
  display: inline-block;
  padding: 5px 10px;
  width: 150px;
  height: 40px;
}
</style>

<script>
  import { getTaskDetailDTO, residuals, getMemberListByTaskId } from '@/api/project/taskCommission'

  export default {
    props: {
      // 任务id
      taskId: {
        type: String
      }
    },
    data() {
      return {
        taskDetail: {},
        price: 1,
        weikeNameOption: [],
        form: {
          memberId: '',
          acceptanceNum: null,
          amount: null,
          remark: null,
          taskId: this.taskId,
          enterpriseId: this.getEnterpriseId()
        },
        formFinanceAdd: {
          memberId: '',
          amount: null,
          remark: null,
          taskId: this.taskId,
          enterpriseId: this.getEnterpriseId()
        },
        rules: {
          acceptanceNum: [
            { required: true, message: '请输入件数', trigger: 'blur' },
            { pattern: /^[1-9]\d*$/, message: '只能输入大于0的整数' }
          ]
        },
        rulesFinanceAdd: {
          memberId: [
            { required: true, message: '请选择微客！', trigger: 'blur' }
          ],
          amount: [
            { required: true, message: '请填写追加酬金！', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请填写验收内容！', trigger: 'blur' }
          ]
        }
      }
    },
    // 初始化页面
    created() {
      this.initTaskDetial()
    },
    methods: {
      initTaskDetial() {
        getTaskDetailDTO(this.taskId).then(response => {
          if (response.isError) return
          this.taskDetail = response.data
          this.price = Math.floor((this.taskDetail.budgetAmount / this.taskDetail.budgetNum) * 100) / 100
          if (response.data.remunerationTypeModel !== 12) {
            this.getTaskMemberList()
          }
        })
      },
      getTaskMemberList() {
        getMemberListByTaskId(this.taskId).then(response => {
          if (response.data) {
            this.weikeNameOption = response.data
            /* response.data.forEach((item) => {
            })*/
          }
        })
      },
      financeTaskClose() {
        this.$bus.$emit('FinanceTaskCommission', null)
      },
      handleFinanceAddSubmin() {
        if (this.taskDetail.remunerationTypeModel === 12) {
          this.$refs['form'].validate((valid) => {
            if (valid) {
              residuals(this.form).then(response => {
                if (response.isError) return
                this.$message({
                  message: '成功',
                  type: 'success'
                })
                this.$bus.$emit('FinanceTaskCommission', null)
              })
            }
          })
        } else {
          if (this.formFinanceAdd.amount > 0) {
            if (this.formFinanceAdd.memberId) {
              residuals(this.formFinanceAdd).then(response => {
                if (response.isError) return
                this.$message({
                  message: '成功',
                  type: 'success'
                })
                this.$bus.$emit('FinanceTaskCommission', null)
              })
            } else {
              this.$message({
                message: '请选择微客',
                type: 'error'
              })
            }
          } else {
            this.$message({
              message: '追加的酬金必须大于0',
              type: 'error'
            })
          }
        }
      }
    },
    mounted() {
    }
  }
</script>
